<template>
<div>
  <NavBar>分类页面</NavBar>
  <div id="mainBox">
    <div class="category-header">
      <van-tabs v-model="active" @click="tabClick">
        <van-tab title="销量排序" name="0">销量排序</van-tab>
        <van-tab title="价格排序" name="1">价格排序</van-tab>
        <van-tab title="评化排序" name="2">评化排序</van-tab>
      </van-tabs>
    </div>
    <div style="margin-top: 10px">
      <van-sidebar v-model="activeKey">
      <van-collapse accordion v-model="activeName" >
        <van-collapse-item :title="item.name" :name="item.name" :key="item.id" v-for="item in categories" >
          <van-sidebar-item :title="item2.name"  v-for="item2 in item.children" :key="item2.id" @click="getGoods(item2.id)"/>
        </van-collapse-item>
      </van-collapse>
      </van-sidebar>
    </div>
      <div class="bs">
        <div class="content">
        <van-card @click="itemClick(item.id)" :title="item.title" :tag="item.comments_count>=0?'流行':'标签' "
                  :price="item.price" :desc="item.updated_at"
                  :num="item.comments_count" v-for="item in showGoods" :key="item.id" :thumb="item.cover_url" :lazy-load="true">
        </van-card>
        </div>
      </div>
  </div>
</div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import {ref, reactive, onMounted, getCurrentInstance, computed,watchEffect,nextTick} from 'vue'
import {useRouter} from 'vue-router'
import  BScroll from 'better-scroll'
export default {
  name: "index",
  components: {NavBar},
  setup(){
    const goods=reactive({
      sales:{page:1,list:[]},
      price:{page:1,list:[]},
      comments:{page:1,list:[]}
    })
    let bscroll=reactive({})
    const {proxy} =getCurrentInstance()
    const router=useRouter()
    let active=ref(0)
    let currentCid=ref(0)
    const orders=['sales','price','comments']
    let currentOrder=ref('sales')
    const activeKey=ref(0)
    let categories=ref([])
    const activeName=ref(0)
    onMounted(async ()=>{
    const res=await proxy.$API.category.getCategory()
      console.log(res)
     categories.value=res.categories
      bscroll=new BScroll(document.querySelector('.bs'),{
        probeType:3,
        click:true,
        pullUpLoad:true
      })
      bscroll.on('pullingUp',async ()=>{
        const page= goods[currentOrder.value].page+1
        console.log('当前页为:',page)
        await proxy.$API.category.getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
          goods[currentOrder.value].list.push(...res.goods.data)
          goods[currentOrder.value].page+=1
        })
        bscroll.finishPullUp()
        bscroll.refresh()
      })
      await init()
    })
    const itemClick=id=>{
      console.log(id)
      router.push({path:'/detail',query:{id}})
    }
    const init=async ()=>{
     await proxy.$API.category.getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
       console.log(currentOrder.value)
       goods[currentOrder.value].list=res.goods.data
        console.log('res1',res)
       nextTick(()=>{
         bscroll && bscroll.refresh()
       })
      })
    }
    const showGoods=computed(()=>{
      return goods[currentOrder.value].list
    })
    const tabClick=(index)=>{
      console.log(orders[index])
      currentOrder.value=orders[index]
      init()
    }
    const getGoods=(id)=>{
      console.log(id)
     currentCid.value=id
      init()
    }
    watchEffect(()=>{
      nextTick(()=>{
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    })
    return{
      activeKey,
      categories,
      activeName,
      active,
      tabClick,
      orders,
      currentOrder,
      getGoods,
      goods,
      init,
      currentCid,
      showGoods,
      itemClick
    }
  }
}
</script>

<style scoped>
::v-deep .van-card{
  margin-top: 0;
}
#mainBox{
  margin-top: 45px;
}
.van-sidebar{
  width:100px;
}
::v-deep .van-tabs__content{
display: none;
}
::v-deep .van-collapse-item__content{
padding: 12px 0;
}
.category-header{
text-align: center;
}
::v-deep .van-cell{
  padding-left:7px;
}
::v-deep .van-tab{
  margin-right: 10px;
  text-align: center;
}
::v-deep .van-cell__title span{
width: 60px;
  display: inline-block;
}
.bs{
  position: absolute;
  top:100px;
  left:110px;
  right: 0;
  bottom: 0;
}
</style>
